<template>
  <div class="comment">
    <article class="header">
      <img :src="userImg"
           alt="用户头像">
      <h1>{{ username }}</h1>
    </article>
    <p>{{ comment }}</p>
  </div>
</template>

<script>
export default {
  props: ['username', 'userImg', 'comment'],
  data () {
    return {
      flag: false
    }
  }
}
</script>

<style lang="less" scoped>
.comment {
  width: 750px;
  min-height: 80px;
  margin: 20px auto;
  .header {
    height: 40px;
    line-height: 20px;
    padding: 5px;
    img {
      width: 30px;
      height: 30px;
      padding-right: 5px;
    }
    h1 {
      display: inline-block;
      vertical-align: top;
      font-size: 14px;
    }
  }
  p {
    width: 750px;
    box-sizing: border-box;
    padding: 0 5px 20px 5px;
    border-bottom: 1px solid #ccc;
  }
}
</style>